<template>
  <div>
    <el-button @click="openDialog">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="first_cateid" label="一级分类"></el-table-column>
      <el-table-column prop="second_cateid" label="二级分类"> </el-table-column>
      <el-table-column prop="goodsname" label="商品名称"></el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          <img
            v-if="scope.row.img"
            width="150px"
            :src="$host + scope.row.img"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="销售价格"></el-table-column>
      <el-table-column prop="market_price" label="市场价格"></el-table-column>
      <el-table-column label="是否热卖">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.ishot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="switchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="popType+'商品'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <goodsInfo></goodsInfo>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="5"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getTotalGoodsNumer, getGoodsList, makeGoodsEdit } from "../../request";
import goodsInfo from './info'
export default {
  data() {
    return {
      tableData: [],
      // 商品总条数
      total: 0,
      // 当前页码
      currentPage: 1,
      dialogVisible: false,
      // 弹窗标题
      popType: "",
    };
  },
  components: {
    goodsInfo
  },
  created() {
    // 获取商品总条数
    this.getTotalGoods();
  },
  methods: {
    // 获取商品总条数
    async getTotalGoods() {
      let res = await getTotalGoodsNumer();
      this.total = res.list[0].total;
      // 先获取总条数，然后才能分页，根据page和size或得对应页码的数据
      let res2 = await getGoodsList({ page: this.currentPage, size: 5 });
      // 后台给的数据是数字，开关组件中要求用true或者false，在此转换
      res2.list.forEach((item) => {
        item.ishot = item.ishot == 1 ? true : false;
        item.isnew = item.isnew == 1 ? true : false;
      });
      this.tableData = res2.list;
    },
    handleCurrentChange(val) {
      // 点击按钮跳转页面
    },
    // 通过开关修改是否热卖
    async switchChange(obj) {
      // obj是修改后商品的全部信息，包含id和ishot
      let ishot = obj.ishot ? 1 : 0;
      // 需要通过formData类型传值
      let formData = new FormData();
      formData.append("id", obj.id);
      formData.append("ishot", ishot);
      // 因为接口可以接受图片，所以用formData传值
      let res = await makeGoodsEdit(formData);
    },
    // 点击打开新增的弹窗
    openDialog() {
      this.popType = "新增";
      this.transData = {
        pid: 0,
        img: "",
        catename: "",
        status: 1,
      };
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="">
</style>